<template>
  <!-- 员工账单管理 -->
  <div class="employee">
    <div class="header">
      <el-date-picker
      v-model="value"
      type="daterange"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :default-time="['00:00:00', '23:59:59']">
    </el-date-picker>
      <!-- 产品状态下拉框 -->
      <el-select v-model="employeeType" clearable placeholder="请选择类型">
        <el-option label="收益" value="收益"></el-option>
        <el-option label="提现" value="提现"></el-option>
      </el-select>
       <el-select v-model="employeeStatus" clearable placeholder="请选择状态">
        <el-option label="正常" value="正常"></el-option>
        <el-option label="未审核" value="未审核"></el-option>
        <!-- <el-option label="未审核" value="未审核"></el-option> -->
      </el-select>
      <!-- 产品栏目下拉框 -->
     <el-select v-model="customerId2" clearable placeholder="员工编号">
        <el-option       
          v-for="customerId in customerId1 "
          :key="customerId.id"
          :label="customerId.username"
          :value="customerId.id"
        ></el-option>
      </el-select>
      <!-- 查询按钮 -->
      <el-button type="primary" @click="queryEmployee">查询</el-button>
    </div>
    <div class="table_content">
      <!-- :data 整个表格的数据源 -->
      <el-table :data="employeeData" style="width: 100%">
        <!-- 编号 -->
        <el-table-column prop="id" label="编号" align="center">
        </el-table-column>
        <!-- 交易金额 -->
        <el-table-column prop="transferMoney" label="交易金额" align="center">
        </el-table-column>
        <!-- 交易时间 -->
        <el-table-column  label="交易时间" align="center">
          <template slot-scope="scope">
            {{scope.row.transferTime|fmtDate}}
          </template>
        </el-table-column>
        
        <!-- 交易类型 -->
        <el-table-column prop="type" label="交易类型" align="center">
        </el-table-column>
        <!-- 状态 -->
        <el-table-column label="状态" type="success" align="center">
           <template slot-scope="scope">
        <el-tag
          :type="scope.row.status === '正常' ? 'success' : 'danger'"
          disable-transitions>{{scope.row.status}}</el-tag>
      </template>
        </el-table-column>
        <!-- 描述 -->
        <el-table-column prop="description" label="描述" align="center">
        </el-table-column>
      </el-table>
    </div>
    <!-- 底部分页区域 -->
    <div class="paginetion">
      <!-- 分页组件 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[8,4,2]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
// 引入axios
import { get, post } from "@/utils/request";
// 引入vuex的辅助函数
export default {
  data() {
    return {
      customerId1:'',
      customerId2:'',
      employeeCategory:"",
      employeeStatus:"",
      employeeType:"",
      employeeData:[],
      value: '',
      beginTime:'',
      endTime:'',
      currentPage: 1,
      // 每页要展示的数据条数
      pageSize: 8,
      // 页面展示数据的总条数
      total: 10,
      // 定一个查询的参数
      queryData: {},
    };
  },
  computed: {

  },
  methods: {
  handleSizeChange(val) {
      // 将每页要展示的数据的条数 进行一个更新
      this.pageSize = val;
      // 将当前的页数 重置到第一页
      this.currentPage = 1;
      // 重新调用获取所有产品数据的方法
      this.getAllEmployeeData();
    },
    /**
     * @description: 控制当前显示的页数
     * @param {*} val 当前的页码
     * @return {*}
     * @author: ZachGmy
     */
    handleCurrentChange(val) {
      // 将当前页数 与 分页插件动态点击控制的页数相绑定
      this.currentPage = val;
      // 重新调用获取所有产品数据的方法
      this.getAllEmployeeData();
    },
    // queryEmployeeData() {
    //   // 定义参数
    //   let data = {
    //     page: 1,
    //     pageSize: 100,
    //   };
    //   // 调用vuex中定义好的方法
    //   this.getAllEmployeeData(data);
    // },
    queryEmployee() {
      this.changetime()
      // 定义参数
      let data = {
        // 类型
        type: this.employeeType,
        // 产品状态
        status: this.employeeStatus,
        // 栏目的id
        
        userId: this.customerId2,
        //开始时间
        beginTime:this.time1,
        //结束时间
        endTime:this.time2
        // beginTime:this.value[0],
        // endTime:this.value[1],
      };
      // 格式化参数 当某个属性没有值的时候 将其删除掉 以防影响网络请求的操作
      for (const key in data) {
        if (!data[key]) {
          delete data[key];
        }
      }
      // 将参数 赋值给 queryData
      this.queryData = data;
      // 将页数强制回到第一页

      this.currentPage = 1;
      // 重新加载产品数据
      this.getAllEmployeeData();
      this.time1 = null
      this.time2 = null
    },
    async getAllEmployeeData() {
      // 获取参数
      let data = {
        page: this.currentPage,
        pageSize: this.pageSize,
      };
      // queryData 和 data 结合成一个对象呢？
      // console.log({...data, ...this.queryData});
      // 通过对应的参数发送网络请求 获取产品数组数据
      let res = await get("/account/pageQueryEmployeeAccount", { ...data, ...this.queryData });
      // 将data中的产品数组 进行赋值
      this.employeeData = res.data.list;
      console.log(res.data.list)
      // 页面总数据条数 赋值
      this.total = res.data.total;
    },
      async FindcustomerId(){
      let data = {
        page:1,
        pageSize:1000,
        roleId:1
      }
      let res = await get ('/baseUser/pageQuery',{...data})
      this.customerId1 = res.data.list
    },
      //转换时间
    changetime(){
      console.log(this.value)
      //将时间转换为林威治时间数值
      if(this.value != null){
        this.time2 = new Date(this.value[1]).getTime();
      this.time1 = new Date(this.value[0]).getTime();
      }
    }
  },
  created() {
    this.getAllEmployeeData();
      this.FindcustomerId()

  },
  mounted() {},
};
</script>
<style scoped>
/* 设置header的样式 */
.header {
  line-height: 40px;
}
/* 分页区域的样式 */
.paginetion {
  position: fixed;
  bottom: 40px;
  right: 10px;
}
</style>
</style>